import React, { PureComponent } from "react"
import { Button } from "antd-mobile"
import { isNull } from "../../utils/helper"
import getDataSource from "../MDatasource"
import F2 from '@antv/f2/lib/index-all';
export default class MiArea extends PureComponent {
	constructor(props) {
		super(props)
		this.chart = null;
		this.timer = null;
		this.canvasId = Math.random() + new Date().getTime()+""
		this.state = {
		
		}
	}

	componentWillReceiveProps(next) {
		let { list: list1 = [] } = this.props;
		let { list: list2 = [] } = next;
		if (list1.length == 0 && list2.length > 0) {
			this.renderChart(list2)
		}
		else {
			if (!_.isEqual(list1, list2)) {
				this.chart.changeData(list2)
			}
		}
	}
	setSource = (source) => {
		let newSource = {};
		for (let i in source) {
			let item = source[i];
			let newItem = {
				...item
			}
			let { formatter, range } = item;
			if (formatter) {
				newItem.formatter = (val) => {
					return formatter.replace(/\{\{item\}\}/g, val)
				}
			}
			if (isNull(range) || (!isNull(range) && range.length == 0)) {
				newItem.range = undefined
			}
			newSource[i] = newItem
		}
		return newSource
	}
	setLegend = (legend) => {
		let { position } = legend || {};
		if (isNull(position)) {
			position = "top"
		}
		return {
			...legend,
			position
		}
	}
	setTooltip = (tooltip) => {
		let { chart_config: { legend, render } } = this.props;
		let { showTitle, showCrosshairs, offsetY, custom } = tooltip || {};
		let { isGroup, groupField } = render || {};
		let isCustom = false;
		if (custom == 1) {
			isCustom = true
		}
		if (isGroup != 1) {
			isCustom = false
		}
		if (isNull(offsetY)) {
			offsetY = 0;
			if (!isCustom) {
				offsetY = 10
			}
		}
		let legendPosition = "top";
		if (!isNull(legend) && !isNull(legend.position)) {
			legendPosition = legend.position;
		}

		return {
			...tooltip,
			showTitle: showTitle == 1,
			showCrosshairs: showCrosshairs == 1,
			offsetY,
			custom: isCustom,
			onShow: (obj) => {
				let items = obj.items;
				let keys = []
				if (isGroup == 1 && groupField) {
					items.map((i, key) => {
						if (i.name !== i.origin[groupField]) {
							keys.push(key)
						}
					})
				}
				if (keys.length > 0) {
					items.splice(keys[0])
				}
			},
			onChange: (obj) => {
				if (isCustom) {
					let legend = this.chart.get('legendController').legends[legendPosition][0];
					let tooltipItems = obj.items;
					let legendItems = legend.items;
					let map = {};
					legendItems.map((item) => {
						map[item.name] = _.clone(item);
					});
					tooltipItems.map((item) => {
						let name = item.name;
						let value = item.value;
						if (map[name]) {
							map[name].value = value;
						}
					});
					legend.setItems(_.values(map));
				}
			},
			onHide: () => {
				if (isCustom) {
					let legend = this.chart.get('legendController').legends[legendPosition][0];
					legend.setItems(this.chart.getLegendItems().country);
				}
			}
		}
	}
	setTitle = () => {
		let { chart_config: { title } } = this.props;
		if (!isNull(title)) {
			return <div style={{ textAlign: "center", width: "100%", paddingTop: "5px" }} dangerouslySetInnerHTML={{ __html: title }}></div>;
		}
	}
	renderChart(data) {
		let { chart_config: { source, legend, tooltip, render } } = this.props;

		this.chart.source(data, {//渲染列定义
			...this.setSource(source)
		});
		this.chart.coord({
			transposed: false
		});

		//legend图例
		if(!isNull(legend)){
			let {show,config} = legend;
			if(show===false){// 不显示所有图例
				this.chart.legend(false);
			}
			else{
				if(!isNull(config)){
					for(let i in config){
						this.chart.legend(i,{
							...this.setLegend(config[i])
						});
					}
				}
			}
		}

		// tooltip 点击时的提示信息
		if(!isNull(tooltip)){
			let {show,config} = tooltip;
			if(show===false){
				this.chart.tooltip(false);
			}
			else{
				this.chart.tooltip({
					...this.setTooltip(config)
				})
			}
		}
	
		//posiiton x*y x和y轴分别对应的字段
		//isGroup 0||1是否分组 groupField 分组字段 groupShape 每个分组的曲线样式 	 line实线 dash虚线 smooth曲线 默认都是line
		let { position, groupField = "", isGroup, groupShape,  shape = "line"} = render || {};
		let chart1 = this.chart.line().position(position);//线形图
		let chart2 = this.chart.area().position(position);//面积图
		if (isGroup == 1) {
			chart1.color(groupField).shape(groupField, (name) => {
				let _shape = shape;
				for (let i in groupShape) {
					if (name === i && !isNull(groupShape[i])) {
						_shape = groupShape[i]
					}
				}
				return _shape;
			})
			chart2.color(groupField).shape(groupField, (name) => {
				let _shape = shape;
				for (let i in groupShape) {
					if (name === i && !isNull(groupShape[i])) {
						_shape = groupShape[i]
					}
				}
				return _shape;
			})
		}
		else {
			chart1.color("").shape(shape)
			chart2.color("").shape(shape)
		}
		chart1.animate({
			appear: {
				duration: 800,
				easing: 'easeIn'
			}
		})
		chart2.animate({
			appear: {
				duration: 800,
				easing: 'easeIn'
			}
		})
		this.chart.render();
	}
	componentDidMount() {
		let { width } = this.wrapper.getBoundingClientRect();
		let { list,  dataset_key } = this.props;
		const data = list;
		this.chart = new F2.Chart({
			id: this.canvasId,
			// width: window.innerWidth,
			width: width,
			height: window.innerWidth > window.innerHeight ? window.innerHeight - 54 : window.innerWidth * 0.618,
			pixelRatio: window.devicePixelRatio
		});
		if (data.length > 0) {
			this.renderChart(data)
		}
	}
	render() {
		return (
			<div ref={e => this.wrapper = e}>
				{this.setTitle()}
				<div className="chart-wrapper" >
					<canvas id={this.canvasId} />
				</div>
			</div>
		)
	}

	componentWillUnmount() {
		clearInterval(this.timer)
	}
}